<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酒店后台管理系统</title>
<jsp:include page="../commonCss.jsp" />
</head>
<body>
	<div class="layui-fluid">
		<div id="select">
			<div class="select_top">
				<div class="select_top_title">
					<span class="layui-breadcrumb" style="visibility:visible;padding: 12px 0 12px 20px;">
	                  <a href="" style="font-size:18px;">用户管理</a>
	                  <span lay-separator style="font-size:18px;">/</span>
	                  <a href="" style="font-size:18px;"><cite>用户详情</cite></a>
	              	</span>
	              	<img style="float:right;margin-right:20px;" src="${pageContext.request.contextPath}/resources/img/icon_refresh.png" title="刷新当前页面"
	              		width="25" height="25"/>
				</div>
			</div>
			<div class="select_nav">
				<span>查询条件</span>
				<hr>
				<div>
					<form action="" method="post" name="form1">
						<label>用户id</label>
						<input type="text" id="user_id" name="user_id" class="select_input1" placeholder="请输入用户id" required="required"></input>
						<label>用户手机号</label>
						<input type="text" id="phone" name="phone" class="select_input3" placeholder="请输入11位手机号码" required="required"></input><br/>
						<button id="btn" class="btn" data-type="reload">精准查询</button>
						<button type="reset" class="btn">重置</button>
					</form>
				</div>
			</div>
		</div>
		<div id="showlist">
			<span>全部用户</span>
			<hr>
			<div>
				<table class="layui-table" id="test"></table>
			</div>
		</div>
	</div>
</body>
<!-- 引入 layui.js -->
<script src="https://layui.11dz.cn/layui-v2.6.8/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.6.0.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/js/jquery-cookie.js"></script>
<script type="text/javascript">
	layui.use('layer', function(){
		  var layer = layui.layer;
		  if(<%=request.getSession().getAttribute("username")%> !=null){
			  layer.msg("欢迎来到酒店后台管理系统");
	 }else{
		  alert("请登录");
		  window.open("${pageContext.request.contextPath}/views/admin/user/login.jsp");
	 }
	});
	layui.use('table', function(){
	  var table = layui.table;
	  table.render({
		id:'testtable'
	    ,elem: '#test'
	    ,url:'${pageContext.request.contextPath}/user/findAll'
	    ,height: 'full-400'
	    ,cellMinWidth: 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
	    ,cols: [[
	       {field:'userId', width:120, title: '用户id', align:"center",sort: true}
	      ,{field:'username', width:80, title: '用户名', align:"center",width: '10%', minWidth: 50}
	      ,{field:'type', width:110,title: '账号类型', align:"center",
	    	templet: function(res) {
				if(res.type == '0') {
					return '普通账号';
				} else {
					return '管理员账号';
				}
			}
	      }
	      ,{field:'phone', title: '手机号', align:"center", width: '10%', minWidth: 50}//minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
	      ,{field:'email', title: '邮箱', align:"center", width: '18%', minWidth: 50}
	      ,{field:'nationality', width:80, title: '国家', align:"center",} 
	      ,{field:'city', width:80, title: '城市', align:"center", sort: true,width: '10%', minWidth: 50}
	      ,{field:'card', title: '证件号', align:"center", width: '17%', minWidth: 50}
	      ,{field:'createTime', title: '注册时间', align:"center", sort: true,width: '17%', minWidth: 50}
	    ]]
	    ,page: true
	    ,limit:20
	    ,response: {
	      statusCode: 200, //重新规定成功的状态码为 200，table 组件默认为 0
	    }
	    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
	      return {
	    	  "code":200,
	    	  "count":res.userlist.length,
	    	  "data": res.userlist //解析数据列表
	      };
	    }
	  });
	  $('#btn').on('click', function() {
		 var inputVal1 = $('.select_input1').val();
		 var inputVal2 = $('.select_input3').val();
        //执行重载
        table.reload('testtable', {
          url:'${pageContext.request.contextPath}/user/findUserInfo',
          where: {
        	user_id:inputVal1,
        	phone:inputVal2
          }
        });
        return false;
      });
	});
	$(document).ready(function(){
		$('img').on('click', function() {
			location.reload();
		});
	});
</script>
</html>